<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>电影推荐</title>
    <link rel="icon" href="images/logo2.png" >
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <style>
        body{
            height: 400px;
            width:480px;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: aliceblue;
        }
        form{
            text-align: center;
        }
        #container{
            background-color: #5bc0de;
        }
    </style>
</head>
<body>
<div class="layui-anim layui-anim-up" id="container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>电影推荐</legend>
    </fieldset>
    <form method="post" class="layui-form" id="userInfo">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-inline">
                <input type="text" name="userId" id="username" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="password" lay-verify="required|pass" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn-normal" id="login" lay-filter="login" lay-submit="">登录</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
        <div class="layui-form-item"><a href="register.html">注册用户</a></div>
    </form>
</div>
<script src="/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['jquery','layer','form'],function(){
        var $=layui.jquery;
        var layer=layui.layer;
        var form=layui.form;

        form.on('submit(login)', function(){
            $.ajax({
                async: false,
                type:"post",
                url:"http://localhost:8888/login.do",
                //data:$("#userInfo").serialize(),
                data:{
                    "userId":$("#username").val(),
                    "password":$("#password").val()
                },
                dataType:"json",
                success:function(response){
                    if(response.status == 1){
                        layer.msg(response.msg,{
                            offset: ['255px', '140px'],
                            area:'200px'
                        });
                        //$("#username").val("");
                        $("#password").val("");
                        return false;
                    }
                    if(response.status == 0){
                        layer.msg("登录成功",{
                            offset: ['255px', '140px'],
                            area:'150px',
                            time:500
                        },function () {
                            // 登陆成功后将返回来的用户信息存到sessionStorage里
                            sessionStorage.setItem("userdId",response.data.userId);
                            window.location.href = "search.html";
                        });
                    }
                }
            });
        });

        // $("#login").click(function(){
        //
        // });

    });
</script>
</body>
</html>